<template>
  <div class="formType">
    <div class="card card-table">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="getRowClass"
        :row-style="{ fontSize: '14px', height: '10px' }" :cell-style="{ padding: '14px', height: '30px' }">
        >
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="module" label="填写工单">
          <template scope="row">
            <el-link class="form-link" type="primary" :underline="false" @click="openForm(row)">填写工单</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="tableData.length !== 0" class="pagina"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total_count"
          :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <form-drawer
          :visible.sync="drawerVisible"
          :form-data="formData"
          size="100%"
          :generate-conf="generateConf"
        />
  </div>
</template>

<script>
import { formTypeGet } from '../../../api/dataCenter' 
import FormDrawer from './FormDrawer.vue';
export default {
  components: {
    FormDrawer
  },
  data() {
    return {
      tableData: [],
      formData:{},
      drawerVisible: false,
      currentPage: 1,
      pageSize: 10,
      total_count: 40,
      generateConf: {
        fileName: undefined,
        type: 'dialog'
      },
    }
  },
  computed: {},
  created() { },
  mounted() {
    this.getData();
  },
  methods: {
    openForm(row){
      this.formData = row.row.module;
      sessionStorage.setItem('typeId', row.row._id)
      this.drawerVisible = true;
    },
    async getData() {
      const params = {
        currPage: this.currentPage,
        pageSize: this.pageSize
      }
      const {data} = await formTypeGet(params)
      if(data.code === 200) {
        this.tableData = data.data
        this.total_count = data.data.length
      }
    },
    // 表格头部样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background: #f7fbff;color:black;padding: 15px'
      } else {
        return ''
      }
    },
    // 分页
    handleSizeChange(value) {
      console.log('每页展示' + value + '条')
      // this.apiLoading = true
      this.pageSize = value
      // this.getDeviceData()
    },

    handleCurrentChange(value) {
      // 改变页数
      console.log('第' + value + '页')
      // this.apiLoading = true
      this.currentPage = value
      // this.getDeviceData()
    }
  }
}
</script>

<style  scoped>
.formType {
  width: 100%;
  height: 100%;
}

.card {
  padding: 24px 24px 24px;
  background-color: #fff;
  border-radius: 2px;
}
.form-link{
  color: $primary
}
</style>
